<template>
    <div class="dialog">
        <div class="dialog-con addDailyContainer">
            <div class="com">新增</div>
            <div class="confirmshop">
               <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="选择时间" prop="date">
                        <el-date-picker
                            v-model="ruleForm.date"
                            type="date"
                            placeholder="选择日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="费用类型" prop="costType">
                        <el-input v-model="ruleForm.costType" ></el-input>
                    </el-form-item>
                    <el-form-item label="收支类型" prop="payType">
                        <el-select v-model="ruleForm.payType" placeholder="请选择">
                            <el-option
                            v-for="item in disburse"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="金额" prop="money">
                        <el-input v-model.number="ruleForm.money" placeholder="请输入金额"></el-input>
                    </el-form-item>
                    <el-form-item label="说明" prop="memo">
                        <el-input v-model="ruleForm.memo" type="textarea" style="width:300px;"></el-input>
                    </el-form-item>
               </el-form>
               <div class="stockCon">
                    <el-button @click="submitForm('ruleForm')" size="small" type="primary">提交</el-button>
                    <el-button @click="cancelAdd" size="small">取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {localStorage} from 'js/localStorage'
export default {
    inject:['reload'],
    data(){
        return{
            disburse:[
                {value:"1",label:"收入"},
                {value:"2",label:"支出"}
            ],
            ruleForm: {
                date:'',
                costType: '',
                money:null,
                memo:'',
                payType:''
            },
           rules:{
                money: [
                    { required: true, message: '请输入金额', trigger: 'change' },
                    { type: 'number', message: '金额必须为数字值'}
                ],
                payType:[
                   { required: true, message: '请选择收支类型', trigger: 'change' },
                ],
                memo:[
                    { required: true, message: '请输入说明', trigger: 'change' },
                ]
           }
        }
    },
    created(){
        this.userId=localStorage.get('userID')
    },
    methods:{
        cancelAdd(){
            this.$emit('closeDialog')
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.confirm()
                } else {
                    return false;
                }
            });
        },
        confirm(){
            let parmas =this.ruleForm;
            parmas['userId'] = this.userId;
            let success=data=>{
                if(data.code=='OK'){
                    this.$message.success("创建成功")
                    this.reload()
                    this.$emit('closeDialog')
                }else{
                    this.$message.error(data.msg)
                }
            }
           this.api.erpDisburseAdd(parmas,success)
        }
    }
}
</script>
<style lang="scss" scoped>
.addDailyContainer{
    width:500px;
    height:480px;
    .com{
        line-height:40px;
        background: #eee;
        text-align: center;
        margin-bottom:20px;
    }
    .confirmshop{
        .el-input{
            width:300px;
        }
        .el-select{
            width:300px;
        }
    }
    .stockCon{
        width:100%;
        text-align:center;
        padding-top:20px;
    }
}
</style>
